<template>
    <div class="bookinfo-container">
        <h3>{{bookInfo.sub1}}</h3>
        <p class="sub">
            <span>阅读人数：{{bookInfo.reading}}</span>
        </p>
        <hr>
        <!--缩略图区域-->
        <div class="thumbs">
            <img class="preview-img" v-for="(item,index) in list" :key="item.src" :src="item.src" height="100 " @click="$preview.open(index,list)" alt="">

        </div>

        <!--图片内容区域-->
        <div class="content" v-html="bookInfo.sub2"></div>

        <!--评论子组件-->
        <comment-box></comment-box>
    </div>
</template>

<script>
    import Toast from "mint-ui"
    import comment from '../subcomponent/comment.vue'
    export default {
        name: "bookinfo",
        components:{
            'comment-box':comment
        },
        data(){
            return {
                sub:this.$route.params.sub1,
                bookInfo:[],
                bookList:{},
                list:[]     //缩略图数据
            }
        },
        methods:{
            //获取图书详情
            getBookInfo(){
                this.$axios.get('/query?key=ee22a1e78b90506df4c51628ccfae9f6&rn=10&rn=10&catalog_id=246').then(res=>{
                    console.log(res.data.result.data)
                    this.bookList=res.data.result.data
                    for(var i=0;i<this.bookList.length;i++){
                        if(this.bookList[i].sub1 == this.sub){
                            this.bookInfo=this.bookList[i]
                            this.list.push({src:this.bookInfo.img,w:600,h:400})
                        }
                    }
                },err=>{
                    Toast('获取新闻失败')
                })
            }
        },
        created() {
            this.getBookInfo(this.sub)
        }
    }
</script>

<style scoped>
    .bookinfo-container{
        padding: 3px;
    }
    .bookinfo-container h3{
        color:#26A2FF;
        font-size:15px;
        text-align: center;
        margin: 15px 0;
    }
    .sub {
        display: flex;
        justify-content: flex-end;
        font-size:13px;
    }
    .content{
        font-size:13px;
        line-height:25px;
        margin-bottom: 10px;
    }
    .thumbs img {
        margin: 10px;
        box-shadow: 0 0 8px #999;
    }
</style>